<template>
  <div class="store_finish table-theme">
      <head-title title="合作--店铺列表--店铺装修"></head-title>
      <el-card>
          <h3>店铺装修情况</h3>
          <el-row :gutter="100" class="left1">
            <el-col :span="5">
            <div class="title1">
                <em>店铺封面图</em>
                <em>店铺logo</em>
            </div>
            <div class="img">
                <div class="item-img">
                    <el-image fit="cover" :src="backgroundimg" style="width:120px;height:120px;" v-if="backgroundimg"></el-image>
                    <div class="havent-uploaded" v-else>
                        未上传
                    </div>
                </div>
                <div class="item-img">
                    <el-image fit="cover" :src="store_logo" style="width:120px;height:120px;" v-if="store_logo"></el-image>
                    <div class="havent-uploaded" v-else>
                        未上传
                    </div>
                </div>
            </div>
            </el-col>
            <el-col :span="5" v-for="(item,index) in list" :key="index">
            <div class="title3">
                <em>{{item.label}}</em>
                <i @click="onOpenMore(item.key)">更多</i>
            </div>
            <div class="img">
                <div class="item-img" v-for="(data,index) in item.data" :key="index">
                    <el-image fit="cover" style="width:120px;height:120px;" v-if="data.image" :src="data.image"></el-image>
                    <div class="havent-uploaded" v-else>
                        未上传
                    </div>
                </div>
            </div>
            </el-col>
          </el-row>
      </el-card>
  </div>
</template>

<script>
export default {
    data () {
        return {
            store_id:'',
            backgroundimg:'',
            store_logo:'',
            list:[]
        }
    },
    created () {
        this.store_id = this.$route.query.store_id;
        this.init();
    },
    methods: {
        init(){
            this.$http(this.$ApiList.StoreRenovation,{store_id:this.store_id}).then(res=>{
                let { backgroundimg, case_list, designer_list, goods_list, group_list, platform_list, store_logo, video_list } = res.datas
                this.backgroundimg = backgroundimg;
                this.store_logo = store_logo;
                this.list = [
                    {
                        label:'自营商品',
                        key:'autotrophy',
                        data:this.countData(goods_list)
                    },
                    {
                        label:'平台商品',
                        key:'platform',
                        data:this.countData(platform_list)
                    },
                    {
                        label:'优选案例',
                        key:'case',
                        data:this.countData(case_list)
                    },
                    {
                        label:'设计团队',
                        key:'design',
                        data:this.countData(designer_list)
                    },
                    {
                        label:'优选套餐',
                        key:'combo',
                        data:this.countData(group_list)
                    },
                    {
                        label:'视频分享',
                        key:'video',
                        data:this.countData(video_list)
                    }
                ]
            })
        },
        countData(data){
            if(data.length<2){
                let length = 2-data.length;
                for (let i = 0; i<length; i++) {
                    data.push({image:''})
                }
                return data;
            }else{
                return data;
            }
        },
        onOpenMore(key){
            switch (key) {
                case 'platform':
                    this.$router.push({path:"/b_add_platform_goods_list"});
                    break;
                case 'autotrophy':
                    this.$router.push({path:"/store_goods_list",query:{type:1,store_id:this.store_id}});
                    break;
                case 'combo':
                    this.$router.push({path:"/store_goods_list",query:{type:2,store_id:this.store_id}});
                    break;
                case 'case':
                    this.$router.push({path:"/case_list",query:{store_id:this.store_id}});
                    break;
                case 'video':
                    this.$router.push({path:"/video_list",query:{store_id:this.store_id}});
                    break;
                case 'design':
                    this.$router.push({path:"/design_list",query:{store_id:this.store_id}});
                    break;
                default:
                    break;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.left1{
    .title1{
        display: flex;
        height: 60px;
        line-height: 60px;
        em{
            flex: 1;
             font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
        }
    }
    .title2,
    .title3{
        display: flex;
        justify-content: space-between;
        height: 60px;
        line-height: 60px;
        em{
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
        }
        i{
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            cursor: pointer;
        }
    }
    .img{
        display: flex;
        .item-img{
            flex: 1;
            height: 120px;
            .el-image{
                width: 120px;
                height: 120px;
                border-radius: 10px;
                overflow: hidden;
            }
            .havent-uploaded{
                width: 118px;
                height: 100%;
                border-radius: 10px;
                border: 1px dashed #ccc;
                text-align: center;
                line-height: 120px;
                font-size: 12px;
                color: #7F7F7F;
            }
        }
    }
}
</style>